CSS Input Group

Easily extend form inputs by adding text, buttons, or button groups
on either side of textual inputs, custom selects, and custom file inputs.

What is CSS Input Group ?

A CSS input group is a design pattern that combines multiple input elements, such as text fields, buttons, and dropdowns, into a single cohesive unit.

An input group refers to a set of form elements, such as text fields, dropdowns, buttons, or icons, that are visually grouped together. They are particularly useful in situations where you need to provide users with additional context or options, such as entering an email address, selecting a country code for a phone number, or appending units to a numeric input.

CSS Input Group

To create an input group, CSS is used to control the layout, spacing, and alignment of the individual elements. By applying specific styles, you can ensure that inputs, buttons, and icons blend together seamlessly.

  • Display Flex: This ensures the elements within the input group are aligned horizontally or vertically.
  • Padding and Margin: Controls the spacing between individual elements in the group.
  • Border: Styles the borders of the input group, ensuring consistent appearance between inputs and buttons.
  • Width: Sets the width of the input group or its individual elements to ensure proper sizing..

Basic Example

@
@example.com
https://example.com/users/
$ .00
@ 



  @
  






  
  @example.com




  

    https://example.com/users/
    
 




  $
  
  .00






  
  @

Button Addons

Form Select

Input groups include support for custom selects and custom file inputs. Browser default versions of these are not supported.

File